import React from 'react';
import { Box, Paper, Typography, Button, Stack, Pagination, styled, Alert, CircularProgress } from '@mui/material';
import InfoSection from './InfoSection';
import { Log } from '../types';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import dayjs from 'dayjs';
import PermissionGuard from '../../../components/PermissionGuard';

interface DailyInfoSectionProps {
    dailyInfo: Log[];
    page: number;
    rowsPerPage: number;
    onPageChange: (event: unknown, newPage: number) => void;
    onAdd: () => void;
    onEdit: (log: Log) => void;
    onDelete: (id: number) => void;
    loading?: boolean;
    error?: string | null;
    total?: number;
}

// 自定义样式组件
const LogItemCard = styled(Paper)(({ theme }) => ({
    border: `1px solid ${theme.palette.divider}`,
    borderRadius: theme.shape.borderRadius,
    marginBottom: theme.spacing(2),
    overflow: 'hidden'
}));

const LogItemHeader = styled(Box)(({ theme }) => ({
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: theme.spacing(1, 2),
    borderBottom: `1px solid ${theme.palette.divider}`
}));

const LogItemContent = styled(Box)(({ theme }) => ({
    padding: theme.spacing(2),
    minHeight: '80px',
    backgroundColor: theme.palette.background.default
}));

const ActionButton = styled(Button)(({ theme }) => ({
    minWidth: 'auto',
    padding: theme.spacing(0.5, 1),
    marginLeft: theme.spacing(1)
}));

const InfoLabel = styled('span')(({ theme }) => ({
    marginRight: theme.spacing(2),
    display: 'inline-block',
    fontSize: '0.875rem'
}));

const DailyInfoSection: React.FC<DailyInfoSectionProps> = ({
    dailyInfo,
    page,
    rowsPerPage,
    onPageChange,
    onAdd,
    onEdit,
    onDelete,
    loading,
    error,
    total
}) => {
    // 处理编辑按钮点击
    const handleEdit = (log: Log) => {
        onEdit(log);
    };

    // 处理删除按钮点击
    const handleDelete = (id: number) => {
        onDelete(id);
    };

    return (
        <InfoSection title="CDC记录" onAdd={onAdd} loading={loading}>
            {error && (
                <Alert severity="error" sx={{ mb: 2 }}>
                    {error}
                </Alert>
            )}

            {loading ? (
                <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
                    <CircularProgress />
                </Box>
            ) : dailyInfo.length > 0 ? (
                <>
                    <Stack spacing={2}>
                        {dailyInfo.map((log) => (
                            <LogItemCard key={log.id} elevation={0}>
                                <LogItemHeader>
                                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                                        <InfoLabel>记录人: {log.recordOwner}</InfoLabel>
                                        <InfoLabel>类型: {log.recordType}</InfoLabel>
                                        <InfoLabel>时间: {dayjs(log.time).format('YYYY-MM-DD')}</InfoLabel>
                                    </Box>
                                    <PermissionGuard requireEditFeatures>
                                        <Box>
                                            <ActionButton
                                                size="small"
                                                variant="contained"
                                                color="primary"
                                                onClick={() => handleEdit(log)}
                                                startIcon={<EditIcon />}>
                                                编辑
                                            </ActionButton>
                                            <ActionButton
                                                size="small"
                                                variant="contained"
                                                color="error"
                                                onClick={() => handleDelete(log.id)}
                                                startIcon={<DeleteIcon />}>
                                                删除
                                            </ActionButton>
                                        </Box>
                                    </PermissionGuard>
                                </LogItemHeader>
                                <LogItemContent>
                                    <Typography variant="body1" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
                                        {log.content}
                                    </Typography>
                                </LogItemContent>
                            </LogItemCard>
                        ))}
                    </Stack>
                    {(total ? total : dailyInfo.length) > rowsPerPage && (
                        <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
                            <Pagination
                                count={Math.ceil((total ? total : dailyInfo.length) / rowsPerPage)}
                                page={page}
                                onChange={onPageChange}
                                color="primary"
                            />
                        </Box>
                    )}
                </>
            ) : (
                <Box sx={{ textAlign: 'center', p: 3 }}>暂无CDC记录</Box>
            )}
        </InfoSection>
    );
};

export default DailyInfoSection;
